
 <!-- 自定义  顶部布局 -->
<template>
  <header>
    <div class="logo">移动终端管理平台</div>
    <div class="cont">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(item, index) in menu"
          :index="item.key"
          :key="index"
          >{{ item.title }}</el-menu-item
        >
      </el-menu>
      <div>
        <el-dropdown @command="toUserCenter">
          <div class="logout">
            <el-avatar :src="headimg" icon="el-icon-user-solid"></el-avatar>
            <span class="text">{{ fullname }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">个人中心</el-dropdown-item>
            <el-dropdown-item command="2" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  props: {
    title: String,
  },
  data() {
    return {
      activeIndex: "1",
      menu: [
        { key: "1", title: "首页", path: "/home" },
        { key: "2", title: "工作台", path: "/system/work" },
        { key: "3", title: "关于", path: "/about" },
      ],

      headimg:
        "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png",
      fullname: "admin",
    };
  },
  created() {
    this.getInfo();
  },
  watch: {
    $route(to, from) {
      // 路由嵌套时，返回不会触发created，所以在这里监听，初始化标签页
      this.initTabs();
    },
  },
  methods: {
    initTabs() {
      let path = this.$route.path;
      if (path === "/") {
        this.activeIndex = "1";
      } else if (path === "/about") {
        this.activeIndex = "3";
      } else if (path === "/user-center") {
        this.activeIndex = "";
      } else {
        this.activeIndex = "2";
      }
    },
    handleSelect(key) {
      let nav_index = this.menu.findIndex((item) => item.key === key);
      let nav_obj = this.menu[nav_index];
      let path = this.$route.path;
      if (path === nav_obj.path) {
        return false;
      }
      this.$router.push(nav_obj.path);
    },
    toUserCenter(command) {
      if (command == 1) {
        //个人中心

        let path = this.$route.path;
        if (path === "/user-center") {
          return false;
        }
        this.$router.push("/user-center");
      } else {
        // 退出登录
        this.logout();
      }
    },

    async logout() {
      // this.$message("确认退出???");

      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {

           //确定
          this.$delet(
            "/auth/logout",
            {},
            (data) => {
              this.$message({ message: "退出成功", type: "success" });
              this.$router.push({ name: "Login" });
              // this.$router.replace("/");
            },
            (error) => {
              this.$message.error(error.msg);
            }
          );

        })
        .catch(() => {//取消
        });
    },
    getInfo() {
      // 获取用户详细信息

      this.$get(
        "/system/user/getInfo",
        {},
        (data) => {
          this.$store.dispatch("updateUser", data.user);
          this.$store.dispatch("updateRoles", data.roles);
          this.$store.dispatch("updatePermissions", data.permissions);
          this.fullname = data.user.nickName;
          this.headimg =
            data.user.avatar == ""
              ? require("@/assets/img/profile.jpg")
              :  process.env.VUE_APP_PORT.substring(0,process.env.VUE_APP_PORT.length-1) + data.user.avatar;
        },
        (error) => {
          this.$message.error(error.msg);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 80px;
  background-color: #545c64;
  color: #fff;
  display: flex;
}
.logo {
  font-size: 24px;
  font-weight: 600;
  margin-left: 20px;
  text-align: center;
  width: 250px;
  line-height: 80px;
}
.cont {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  padding: 0 30px;
  align-items: center;
}
.logout {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 30px;
  .text {
    margin-left: 10px;
    vertical-align: middle;
    color: #fff;
  }
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
.el-menu--horizontal > .el-menu-item {
  height: 80px;
  line-height: 80px;
}
</style>